<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 带表格的面板</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 为了在面板中创建一个无边框的表格，
我们可以在面板中使用 class .table。假设有个 <div> 包含 .panel-body，
我们可以向表格的顶部添加额外的边框用来分隔。如果没有包含 .panel-body 的 <div>，
则组件会无中断地从面板头部移动到表格。

下面的实例演示了这点：
 -->

<div class="panel panel-default">
   <div class="panel-heading">
      <h3 class="panel-title">面板标题</h3>
   </div>
   <div class="panel-body">
      这是一个基本的面板
   </div>
   <table class="table">
      <th>产品</th><th>价格 </th>
      <tr><td>产品 A</td><td>200</td></tr>
      <tr><td>产品 B</td><td>400</td></tr>
   </table>
</div>
<div class="panel panel-default">
   <div class="panel-heading">面板标题</div>
   <table class="table">
      <th>产品</th><th>价格 </th>
      <tr><td>产品 A</td><td>200</td></tr>
      <tr><td>产品 B</td><td>400</td></tr>
   </table>
</div>

</body>
</html>